import { ref, unref, computed, markRaw } from 'vue'

import BwComs from './coms/index.vue'
import BwComCss from './comCss/index.vue'
import BwBaseInfo from './base/index.vue'
import BwDimTree from './domTree/index.vue'
import BwLogicCode from './logicCode/index.vue'
import BwConfigInfo from './config/index.vue'

export function useDesignLeft() {
  const isExpand = ref<boolean>(false)
  const curSideKey = ref<string>('com')

  const curEle = computed(() => {
    switch (unref(curSideKey)) {
      case 'com': {
        return markRaw(BwComs)
      }
      case 'dom': {
        return markRaw(BwDimTree)
      }
      case 'logic': {
        return markRaw(BwLogicCode)
      }
      case 'baseInfo': {
        return markRaw(BwBaseInfo)
      }
      case 'css': {
        return markRaw(BwComCss)
      }
      case 'config': {
        return markRaw(BwConfigInfo)
      }
      default: {
        return null
      }
    }
  })

  return { curEle, isExpand, curSideKey }
}
